
<template>
  <mu-paper :z-depth="1" class="lan-loadmore-body">
    <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>整改单
      <mu-button icon slot="right" >
        <!-- <mu-icon value="more"></mu-icon> -->
        <!-- <i class="iconfont iconshaixuan4"></i> -->
      </mu-button>
    </mu-appbar>
    <mu-container ref="container" class="lan-loadmore-content">
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loading="loading"
        @load="load"
        :loaded-all="loadAll"
      >
        <!-- 这里是业务结构 -->
        <mu-paper
          class="lan-card no-padding"
          :z-depth="1"
          v-for="(item,index) in data"
          :key="index"
          
        >
          <div class="lan-card-header">
            <div class="flex_b">
              <div class="lan-btn circle danger" v-if="item.problemLevel == 3">
                重大
              </div>
              <div class="lan-btn circle default" v-if="item.problemLevel == 1">
                一般
              </div>
              <div class="lan-btn circle warning" v-if="item.problemLevel == 2">
                较大
              </div>
              <div class="lan-btn circle success" v-if="!item.problemLevel">
                无问题
              </div>
              <div class="lan-btn circle normal" v-if="!item.type || item.type == 1">
                协同检查
              </div>
              <div class="lan-btn circle normal" v-if="item.type == 2">
                工匠之星
              </div>
              <div class="lan-btn circle normal" v-if="item.type == 3">
                实测实量
              </div>
            </div>
            <div>
              <div class="lan-btn no-bg warning" v-if="item.status == '0'">
                整改中
              </div>
              <div class="lan-btn no-bg default" v-if="item.status == 1">
                待复查
              </div>
              <div class="lan-btn no-bg success" v-if="item.status == 2">
                已整改
              </div>
            </div>
          </div>
          
          <div class="lan-card-body no-bottom-padding" @click="goDetail(item)">
            <div class="lan-detail">
              <span class="lan-detail-h">检查部位：</span>
              <span class="lan-detail-r">{{item.checkParts}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">问题描述：</span>
              <span class="lan-detail-r">{{item.problemDescription}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">整改责任人：</span>
              <span class="lan-detail-r">{{item.responsibleUserName}}</span>
            </div>
            <div class="lan-detail">
              <span class="lan-detail-h">整改期限：</span>
              <span class="lan-detail-r">{{item.endTime}}</span>
            </div>
          </div> 
          <!-- 没有模板暂时不做 -->
          <div  class="lan-card-footer" style="justify-content: flex-end" v-power="'checkToTips'" >
            <div class="lan-btn big default" @click="gotips(item)" >
                生成整改通知单
            </div>
          </div>
        </mu-paper>
        <p v-if="loadAll && data.length > 5" class="nodataTips">无更多数据了</p>
      </mu-load-more>
      <NoData v-if="data.length <= 0 && loaded" />
    </mu-container>
    
    <!-- 筛选 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="searchcontroll"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="searchcontroll = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>筛选条件
        <mu-button icon slot="right" @click="clearSearch">
          <span class="text">清空</span>
        </mu-button>
      </mu-appbar>
      <!-- <mu-bottom-sheet :open.sync="searchcontroll"> -->
      <mu-list class="lan-dialog-body no-padding bg-default">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="25%">
          <mu-form-item label="开始时间">
            <mu-date-input
              v-model="form.startTime"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              container="bottomSheet"
              label-float
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="结束时间">
            <mu-date-input
              v-model="form.endTime"
              placeholder="请选择"
              container="bottomSheet"
              label-float
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="项目名称">
            <mu-select
              v-model="form.orgId"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in projectList"
                :key="index"
                :label="list.projectName"
                :value="list.projectId"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="检查人" class="form-between" >
            <span class="normal-font-size form-right-text" @click="userOpen = true" >{{checkUser?checkUser:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="问题来源">
            <mu-select v-model="form.problemFrom" placeholder="请选择" popover-class="lan-popover-select">
              <mu-option
                v-for="(list,index) in typeList"
                :key="index"
                :label="list.name"
                :value="list.value"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
        </mu-form>
        <mu-list-item class="lan-dialog-sumit lan-block-btn-line">
          <mu-button full-width color="primary" class="lan-block-btn" @click="search">确认</mu-button>
        </mu-list-item>
      </mu-list>
    </mu-dialog>
    <User ref="User" v-if="userOpen" :multiple="false" :open="userOpen" :orgType="'currOrgProject'" :dataScope="'project'" @change="userChange" @close="userOpen = false"></User>
  </mu-paper>
</template>

<script>
import User from "@/select/user/User"
export default {
  name: "list",
  components: {
    User
  },
  data() {
    return {
      refreshing: false,
      loading: false,
      loaded: false,
      loadAll: false,
      pageSize: 10,
      pageNo: 0,
      totalPage: 1,
      data: [],
      detailController: false,
      Detail: {},
      searchcontroll: false,
      form: {
        orgId: "",
        startTime: "",
        endTime: "",
        problemFrom: "",
        userId: ""
      },
      typeList: [
        { value: "1", name: "检查" },
        { value: "2", name: "问题上报" },
        { value: "3", name: "实测实量" }
      ],
      projectList: [],
      checkUser:'',
      userOpen:false,
    };
  },
  async created() {
    this.getData(this.form);
    this.projectList = await this.$A.comData("projectList");
    // this.$openLoading();
    // setTimeout(() => {
    //   this.$closeLoading();
    //   this.loaded = true
    // },1000)
    
  },
  methods: {
    userChange(value){
        console.log(value)
        this.form.userId = value[0]['id']
        this.checkUser = value[0]['employeeName']
        this.userOpen =false
    },
    async refresh() {
      this.refreshing = true;
      this.pageNo = 0;
      this.totalPage = 1;
      this.loaded = false;
      this.loadAll = false;
      this.data = [];
      this.$refs.container.scrollTop = 0;
      await this.getData(this.form);
      this.refreshing = false;
    },
    search() {
      this.loaded = false;
      this.loadAll = false;
      this.pageSize = 10;
      this.pageNo = 0;
      this.totalPage = 1;
      this.data = [];
      this.searchcontroll = false;
      this.getData(this.form);
    },
    clearSearch() {
      this.form = {
        orgId: "",
        startTime: "",
        endTime: "",
        problemFrom: "",
        userId: ""
      };
    },
    async getData(params) {
      if (this.pageNo >= this.totalPage) {
        this.loadAll = true;
        return;
      }
      this.$openLoading();
      if (!this.loadAll) {
        this.pageNo += 1;
      } else {
        return;
      }
      let obj = {
        // obj: {
        "orgId":this.$A.GS('orgInfo')['orgId'],
        "type":this.$A.GS('orgInfo')['type'],
        // },
        current: this.pageNo,
        size: this.pageSize
      };
      // if (params) {
      //   Object.assign(obj, params);
      // }
      this.$A.Go('get','/safety/checkProblem/pageList',obj).then(success=>{
          if(success.code == 200){
            let data = success.body.rows || []
            let total = success.body.page.rows || '0'
            this.totalPage = Math.ceil(total/this.pageSize)
            // let data =  []
            // let total = 0
            if(this.pageNo == 1){
              this.data = data;
            }else{
              this.data.push(...data);
            }
            if(total == 0 || Math.ceil(total/this.pageSize) <= this.pageNo || data.length <= 0){
              this.loadAll = true;
            }
          } else {
            this.data = [];
          }
          this.loaded = true;
          this.$closeLoading();
        },
        function(err) {
          console.warn(err);
        }
      );
    },
    async load() {
      this.loading = true;
      await this.getData(this.form);
      this.loading = false;
    },
    goDetail(list) {
      sessionStorage.setItem('punchListsDetail',JSON.stringify(list))
      this.$router.push('/punchListsDetail');
    },
    gotips(item){
      this.$router.push({
        path: '/Totips',
        query: {
          problemId: item.problemId
        }
      });
    },
    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    loadFile(list) {
      let a = document.createElement("a");
      a.setAttribute("href", list.url);
      a.setAttribute("download", list.name);
      a.click();
    }
  }
};
</script>

<style lang="scss" scoped>
.img-box {
  img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px 8px;
  }
}
.lan-form-title {
  line-height: 40px;
}
</style>
